<template>
  <div class="common-layout">
    <el-row>
      <el-container>
        <el-aside width="120px">
          <Aside />
        </el-aside>
        <el-container style="display: block">
          <el-row>
            <el-col :span="leftSpan">
              <DatasetList />
            </el-col>
            <el-col :span="middleSpan">
              <div v-show="action === 'item'">
                <ItemDetail />
              </div>
              <div v-show="action === 'dataset'">
                <DatasetDetail />
              </div>
              <div v-show="action === 'config'">
                <DatasetConfig />
              </div>
              <!-- <div v-else>
        <p>请选择一个数据集</p>
      </div> -->
            </el-col>
            <el-col :span="rightSpan">
              <Chat />
            </el-col>
          </el-row>
        </el-container>
      </el-container>
    </el-row>
  </div>
</template>

<script setup>
import { ref, provide } from "vue";
import Aside from '@/pages/layout/Aside.vue'
import DatasetList from "./components/DatasetList.vue";
import DatasetDetail from "./components/DatasetDetail.vue";
import ItemDetail from "./components/ItemDetail.vue";
import DatasetConfig from "./components/DatasetConfig.vue";
import Chat from "../plugin/components/Chat.vue";

const leftSpan = ref(6)
const middleSpan = ref(18)
const rightSpan = ref(0)

const action = ref('item') //item,dataset,config,chat
const setLayout = (layout) => {
  if (layout === 'item') {
    leftSpan.value = 6
    middleSpan.value = 18
    rightSpan.value = 0

  } else if (layout === 'dataset') {
    leftSpan.value = 6
    middleSpan.value = 18
    rightSpan.value = 0

  } else {
    leftSpan.value = 6
    middleSpan.value = 18
    rightSpan.value = 0
  }
}
const userAction = (actionName) => {
  action.value = actionName
  setLayout(actionName)
}
provide('userAction', userAction)
</script>

<style scoped>
/deep/ .el-tabs__header {
  margin: 0;
}
</style>